<template>
    <div class="musicBaseInfo">
        <div class="musicInfo">
            <div class="pic">
                <el-image  :src="songBaseInfo.al.picUrl" alt="">
                    <div slot="placeholder"><i class="el-icon-loading "></i></div>
                </el-image>
            </div>
            <div>
                <div class="name">{{songBaseInfo.name | songNameFormat}}</div>
                <div class="artist">
                    <div class="artist_item" 
                    @click="goArtist(item.id)"
                    v-for="(item,index) in songBaseInfo.ar"
                    :key="index"
                    >
                    {{item.name}}
                    </div>
                </div>
            </div> 
        </div>
        <div class="operation">
            <div class="iconfont iconxihuan"></div>
            <div class="iconfont iconshare"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'musicBaseInfo',
    props: [
        'songBaseInfo'
    ],
    data() {
        return {

        };
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    watch: {
        'msg'(){

        }
    },
    methods: {
        // 跳转歌手页
        goArtist(id){
            console.log(id)
            this.$router.push({path:'/artist',query:{id}})
        }
    },
    filters:{
        songNameFormat(name){
            let length = name.length
            if(length > 9){
                return name.slice(0,9)+'...'
            }
            return name
        }
    },
    components: {

    },
};
</script>

<style scoped lang="less">
.position_flex(@jc:space-between,@ai:center){
  display: flex;
  align-items: @ai;
  justify-content: @jc;
}
.musicInfo{
    .position_flex;
    font-size: 12px;
    div{
        margin-left: 5px;
        cursor: pointer;
    }
    .pic{
        width: 60px;
        height: 60px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .artist{
        
        color: #666666;
        margin-top: 5px;
        font-size: 12px;
        overflow: hidden;
        /*必须结合的属性,当内容溢出元素框时发生的事情*/
        text-overflow: ellipsis;/*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
        display: -webkit-box;/*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
        -webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数。*/
        -webkit-box-orient: vertical;/*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
    }
    
}
.operation{
    margin-right: 5px;
    div{
        margin-top: 5px;
        cursor: pointer;
    }
}

</style>
